import React, { render, Componet } from "./react";

const root = document.getElementById("root");

const jsx = (
  <div>
    <p>Hello React</p>
    <p>Hello Fiber</p>
  </div>
);

// console.log(jsx)
// 将virtual dom对象转换真实dom对象
render(jsx, root)

// 节点更新
setTimeout(() => {
  const jsx = (
    <div>
      {/* <div>星期四</div>
      <p>nihao</p> */}
      <p>Hello Fiber</p>
    </div>
  );
  render(jsx, root)
}, 2000);

class Greating extends Componet {
  constructor(props) {
    super(props);
    this.state = {
      name: "张三",
    };
  }
  render() {
    return (
      <div>
        {this.props.title}Hello
        {this.state.name}
        <button onClick={() => this.setState({ name: "李四" })}>button</button>
      </div>
    );
  }
}
// render(<Greating title="类组件"/>, root)

function FnComponent(props) {
  return <div>{props.title}FnComponent</div>;
}
// render(<FnComponent title="你好"/>, root);
